<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学刷题平台 - 题库</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-green': '#045525',       // 校色主绿
                        'sysu-lightGreen': '#E6F0EA',  // 浅绿辅助色
                        'sysu-darkGreen': '#03441D',   // 深绿
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-card': '#FFFFFF',        // 卡片背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类与基础样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-sysu {
                @apply bg-sysu-green text-white px-4 py-2 rounded-lg hover:bg-sysu-darkGreen transition-all duration-300 shadow-sm hover:shadow;
            }
            .btn-outline {
                @apply bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:border-sysu-green hover:text-sysu-green transition-all duration-300;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
            }
            .stat-card {
                @apply bg-white rounded-xl p-5 shadow-card card-hover;
            }
            .tag {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .pagination-item {
                @apply px-3 py-2 rounded border border-gray-300 text-gray-700 hover:border-sysu-green hover:text-sysu-green transition-colors;
            }
            .pagination-item.active {
                @apply bg-sysu-green text-white border-sysu-green;
            }
            .pagination-item.disabled {
                @apply border-gray-200 text-gray-400 cursor-not-allowed hover:border-gray-200 hover:text-gray-400;
            }
            .badge {
                @apply px-2.5 py-1 rounded-full text-xs font-medium;
            }
            /* 基础淡入类：初始透明+下移，显示时恢复 */
            .fade-in {
                opacity: 0;
                transform: translateY(15px);
                transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            }
            /* 显示状态 */
            .fade-in.visible {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans opacity-0 transition-opacity 0.8s ease-out" id="page-body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm fade-in">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-green text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-green">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航 -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">首页</a>
                    <a href="/questions" class="text-sysu-green font-medium py-5 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sysu-green">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block group">
                        <input type="text" placeholder="搜索题目"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-green focus:outline-none text-sm w-40 lg:w-56 transition-all duration-300 group-hover:border-gray-400 focus:w-56 lg:focus:w-64">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm transition-colors group-hover:text-sysu-green"></i>
                    </div>

                    <!-- 用户区域 -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-green rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-gray-600 hover:text-sysu-green transition-colors" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航 -->
            <div class="md:hidden hidden pb-3 animate-fadeIn" id="mobile-menu">
                <div class="flex items-center relative mb-3 mx-2">
                    <input type="text" placeholder="搜索题目"
                           class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-green focus:outline-none text-sm">
                    <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                </div>
                <nav class="flex flex-col space-y-2 mx-2">
                    <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">首页</a>
                    <a href="/questions" class="text-sysu-green px-2 py-2 bg-sysu-lightGreen rounded font-medium">题库</a>
                    <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">学习资源</a>
                </nav>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 fade-in">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">题库</h2>
                <p class="text-gray-500 mt-1">提升编程能力，挑战各类算法题目</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <button id="favorites-btn" class="flex items-center btn-outline">
                    <i class="fa fa-list-ul mr-2"></i> 收藏列表
                </button>

                <button id="filter-btn" class="flex items-center btn-sysu">
                    <i class="fa fa-filter mr-2"></i> 筛选
                </button>
            </div>
        </div>

        <!-- 数据展示板区域 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <!-- 总题数统计 -->
            <div class="stat-card fade-in" style="transition-delay: 0.1s">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总题数</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1" id="total-questions">1200+</h3>
                    </div>
                    <div class="w-10 h-10 bg-sysu-green/10 text-sysu-green rounded-full flex items-center justify-center">
                        <i class="fa fa-list-alt"></i>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <span class="text-green-500"><i class="fa fa-arrow-up"></i> 12题 本周新增</span>
                </div>
            </div>

            <!-- 已完成题目 -->
            <div class="stat-card fade-in" style="transition-delay: 0.2s">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">已完成</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1" id="completed-questions">42</h3>
                    </div>
                    <div class="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <span>完成率 <span class="font-medium">3.5%</span></span>
                </div>
            </div>

            <!-- 连续刷题天数 -->
            <div class="stat-card fade-in" style="transition-delay: 0.3s">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">连续刷题</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1" id="streak-days">7</h3>
                    </div>
                    <div class="w-10 h-10 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-fire"></i>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <span>距离下一个徽章还差 <span class="font-medium">3天</span></span>
                </div>
            </div>

            <!-- 正确率 -->
            <div class="stat-card fade-in" style="transition-delay: 0.4s">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">平均正确率</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1" id="accuracy-rate">68%</h3>
                    </div>
                    <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-line-chart"></i>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    <span class="text-green-500"><i class="fa fa-arrow-up"></i> 5% 较上周</span>
                </div>
            </div>
        </div>

        <!-- 可隐藏的筛选面板 -->
        <div id="filter-panel" class="hidden bg-white rounded-xl p-5 mb-6 shadow-card fade-in">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                <!-- 难度筛选 -->
                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-2">难度</label>
                    <div class="flex flex-wrap gap-2">
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="difficulty-checkbox rounded text-sysu-green" value="easy" checked>
                            <span class="ml-2 text-sm text-gray-700">简单</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="difficulty-checkbox rounded text-sysu-green" value="medium" checked>
                            <span class="ml-2 text-sm text-gray-700">中等</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="difficulty-checkbox rounded text-sysu-green" value="hard" checked>
                            <span class="ml-2 text-sm text-gray-700">困难</span>
                        </label>
                    </div>
                </div>

                <!-- 标签筛选 -->
                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-2">标签</label>
                    <div class="flex flex-wrap gap-2 max-h-40 overflow-y-auto pr-2">
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="string" checked>
                            <span class="ml-2 text-sm text-gray-700">字符串</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="array" checked>
                            <span class="ml-2 text-sm text-gray-700">数组</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="dp" checked>
                            <span class="ml-2 text-sm text-gray-700">动态规划</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="tree" checked>
                            <span class="ml-2 text-sm text-gray-700">树</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="graph" checked>
                            <span class="ml-2 text-sm text-gray-700">图论</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="union" checked>
                            <span class="ml-2 text-sm text-gray-700">并查集</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="diff" checked>
                            <span class="ml-2 text-sm text-gray-700">前缀和</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="window" checked>
                            <span class="ml-2 text-sm text-gray-700">滑动窗口</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="double" checked>
                            <span class="ml-2 text-sm text-gray-700">双指针</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="hash" checked>
                            <span class="ml-2 text-sm text-gray-700">哈希表</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="stack" checked>
                            <span class="ml-2 text-sm text-gray-700">栈</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="queue" checked>
                            <span class="ml-2 text-sm text-gray-700">队列</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="dfs" checked>
                            <span class="ml-2 text-sm text-gray-700">深度优先搜索</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="bfs" checked>
                            <span class="ml-2 text-sm text-gray-700">广度优先搜索</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="segment" checked>
                            <span class="ml-2 text-sm text-gray-700">线段树</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="treenums" checked>
                            <span class="ml-2 text-sm text-gray-700">树状数组</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="topo" checked>
                            <span class="ml-2 text-sm text-gray-700">拓扑排序</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="sort" checked>
                            <span class="ml-2 text-sm text-gray-700">排序</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="binary" checked>
                            <span class="ml-2 text-sm text-gray-700">二分查找</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="bit" checked>
                            <span class="ml-2 text-sm text-gray-700">位运算</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="bits" checked>
                            <span class="ml-2 text-sm text-gray-700">状态压缩</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="tanxin" checked>
                            <span class="ml-2 text-sm text-gray-700">贪心</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer">
                            <input type="checkbox" class="tag-checkbox rounded text-sysu-blue" value="backtrack" checked>
                            <span class="ml-2 text-sm text-gray-700">回溯</span>
                        </label>
                    </div>
                </div>

                <!-- 状态筛选 -->
                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-2">状态</label>
                    <div class="flex flex-wrap gap-2">
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="status-checkbox rounded text-sysu-green" value="finished" checked>
                            <span class="ml-2 text-sm text-gray-700">已完成</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="status-checkbox rounded text-sysu-green" value="start" checked>
                            <span class="ml-2 text-sm text-gray-700">尝试过</span>
                        </label>
                        <label class="inline-flex items-center hover:bg-gray-50 px-2 py-1 rounded cursor-pointer transition-colors">
                            <input type="checkbox" class="status-checkbox rounded text-sysu-green" value="notstart" checked>
                            <span class="ml-2 text-sm text-gray-700">未开始</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="flex justify-end mt-4 gap-3">
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors" id="reset-filter-btn">重置</button>
                <button class="px-4 py-2 bg-sysu-green text-white rounded-lg text-sm hover:bg-sysu-darkGreen transition-colors" id="apply-filter-btn">应用</button>
            </div>
        </div>

        <!-- 题目统计 -->
        <div class="bg-white rounded-xl p-4 mb-6 shadow-card fade-in">
            <div class="text-gray-600 text-sm flex items-center">
                <i class="fa fa-search mr-2 text-sysu-green"></i>
                共找到 <span class="text-sysu-green font-bold" id="questions_cnt">{{ questions|length }}</span> 道题目
            </div>
        </div>

        <!-- 主内容容器 - 使用flex布局使两个列表并排显示 -->
        <div class="flex gap-6">
            <!-- 收藏列表 -->
            <div class="hidden w-1/5" id="save-list-container">
                <div id="favorites-panel" class="hidden lg:block w-full bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300 transform lg:translate-x-0 -translate-x-full fixed lg:static top-0 left-0 h-full z-50 lg:z-auto pt-20 lg:pt-0 fade-in">
                    <!-- 收藏面板头部 -->
                    <div class="p-4 border-b flex justify-between items-center bg-sysu-lightGreen/50">
                        <h3 class="font-bold text-gray-800 flex items-center">
                            <i class="fa fa-bookmark text-sysu-green mr-2"></i> 我的收藏
                        </h3>
                        <button id="close-favorites" class="lg:hidden text-gray-500 hover:text-sysu-green transition-colors">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>

                    <!-- 收藏面板内容 -->
                    <div class="p-4">
                        <div class="relative mb-4">
                            <input type="text" placeholder="搜索收藏题目..." class="w-full py-2 pl-10 pr-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-sysu-green/50 focus:border-sysu-green text-sm transition-all">
                            <i class="fa fa-search absolute left-3 top-3 text-gray-400 transition-colors focus-within:text-sysu-green"></i>
                        </div>

                        <div id="favorites-list" class="space-y-3 max-h-[calc(100vh-180px)] overflow-y-auto">
                            <!-- 收藏题目示例 -->
                            <div class="p-3 border border-gray-100 rounded-lg hover:border-sysu-green hover:bg-sysu-lightGreen/30 transition-all cursor-pointer">
                                <div class="flex justify-between items-start">
                                    <h4 class="font-medium text-gray-800">两数之和</h4>
                                    <span class="badge bg-green-100 text-green-800">简单</span>
                                </div>
                                <p class="text-gray-500 text-sm mt-1 line-clamp-2">给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数...</p>
                                <div class="flex justify-between items-center mt-2">
                                    <a href="/questions/1" class="text-sysu-green text-xs">查看题目</a>
                                    <button class="text-gray-400 hover:text-red-500 transition-colors">
                                        <i class="fa fa-times-circle"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="p-3 border border-gray-100 rounded-lg hover:border-sysu-green hover:bg-sysu-lightGreen/30 transition-all cursor-pointer">
                                <div class="flex justify-between items-start">
                                    <h4 class="font-medium text-gray-800">无重复字符的最长子串</h4>
                                    <span class="badge bg-yellow-100 text-yellow-800">中等</span>
                                </div>
                                <p class="text-gray-500 text-sm mt-1 line-clamp-2">给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。</p>
                                <div class="flex justify-between items-center mt-2">
                                    <a href="/questions/3" class="text-sysu-green text-xs">查看题目</a>
                                    <button class="text-gray-400 hover:text-red-500 transition-colors">
                                        <i class="fa fa-times-circle"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="text-center text-gray-500 text-sm py-6">
                                <i class="fa fa-bookmark-o text-2xl mb-2 block text-gray-300"></i>
                                暂无更多收藏题目
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题目列表 - 占据剩余空间 -->
            <div class="flex-1" id="question-list-container">
                <div class="space-y-4" id="question-list">
                    <!-- 题目内容会通过JavaScript动态加载 -->
                </div>
            </div>
        </div>

        <script>
            const saveListContainer = document.getElementById('save-list-container');
            const favorite_btn = document.getElementById('favorites-btn');
            favorite_btn.addEventListener('click', () => {
                const icon = favorite_btn.querySelector('i');
                if(saveListContainer.classList.contains('hidden')){
                    saveListContainer.classList.remove('hidden');
                    favorite_btn.textContent = '  隐藏收藏列表';
                    icon.className = 'fa fa-chevron-up mr-2';
                    favorite_btn.prepend(icon);
                    // 收藏面板淡入
                    const panel = document.getElementById('favorites-panel');
                    panel.classList.add('visible');
                }
                else{
                    saveListContainer.classList.add('hidden');
                    favorite_btn.textContent = '  收藏列表';
                    icon.className = 'fa fa-list-ul mr-2';
                    favorite_btn.prepend(icon);
                }
            });
        </script>

        <!-- 分页 -->
        <div class="flex justify-center mt-8 fade-in">
            <nav class="flex items-center space-x-1">
                <!-- 上一页 -->
                <a href="javascript:;" class="pagination-item text-sm" data-type="prev">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <!-- 页码项 -->
                <a href="javascript:" class="pagination-item active text-sm" data-type="page" data-page="1">1</a>
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="2">2</a>
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="3">3</a>
                <!-- 省略号 -->
                <span class="px-2 text-gray-500 text-sm">...</span>
                <!-- 最后一页 -->
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="25">25</a>
                <!-- 下一页 -->
                <a href="javascript:" class="pagination-item text-sm" data-type="next">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </nav>
        </div>

        <script>
            const questionsCnt = document.getElementById('questions_cnt');

            // 分页核心配置
            const paginationConfig = {
                currentPage: 1,    // 当前页码
                totalPages: 25,    // 总页数
                showPages: 3       // 中间显示的页码数量
            };

            // 获取所有分页元素
            const paginationItems = document.querySelectorAll('.pagination-item');
            const prevBtn = document.querySelector('[data-type="prev"]');
            const nextBtn = document.querySelector('[data-type="next"]');
            let pageItems = document.querySelectorAll('[data-type="page"]');

            // 初始化分页状态
            updatePaginationStatus();

            // 绑定分页点击事件
            paginationItems.forEach(item => {
                item.addEventListener('click', function() {
                    const type = this.getAttribute('data-type');
                    const page = parseInt(this.getAttribute('data-page')) || 0;

                    switch(type) {
                        case 'prev':
                            if (paginationConfig.currentPage > 1) {
                                goToPage(paginationConfig.currentPage - 1);
                            }
                            break;
                        case 'next':
                            if (paginationConfig.currentPage < paginationConfig.totalPages) {
                                goToPage(paginationConfig.currentPage + 1);
                            }
                            break;
                        case 'page':
                            if (page !== paginationConfig.currentPage && page >= 1 && page <= paginationConfig.totalPages) {
                                goToPage(page);
                            }
                            break;
                    }
                });
            });

            // 动态渲染页码
            function renderPageNumbers() {
                const { currentPage, totalPages, showPages } = paginationConfig;
                const pageContainer = document.querySelector('.flex.items-center.space-x-1');
                const ellipsis = pageContainer.querySelector('span.px-2.text-gray-500');
                const prevBtn = pageContainer.querySelector('[data-type="prev"]');
                const nextBtn = pageContainer.querySelector('[data-type="next"]');

                // 清除原有中间页码
                const oldPageItems = pageContainer.querySelectorAll('[data-type="page"]:not([data-page="' + totalPages + '"])');
                oldPageItems.forEach(item => item.remove());

                // 计算需要显示的页码范围
                let startPage = Math.max(1, currentPage - Math.floor(showPages / 2));
                let endPage = Math.min(totalPages - 1, startPage + showPages - 1);
                if (endPage - startPage + 1 < showPages) {
                    startPage = Math.max(1, endPage - showPages + 1);
                }

                // 生成新的中间页码
                for (let i = startPage; i <= endPage; i++) {
                    const pageItem = document.createElement('a');
                    pageItem.href = 'javascript:';
                    pageItem.className = 'pagination-item text-sm fade-in'; // 分页项添加淡入类
                    pageItem.setAttribute('data-type', 'page');
                    pageItem.setAttribute('data-page', i);
                    pageItem.textContent = i;
                    if (i === currentPage) {
                        pageItem.classList.add('active');
                    }
                    ellipsis.before(pageItem);
                    // 立即显示分页项
                    setTimeout(() => pageItem.classList.add('visible'), 50 * (i - startPage));
                }

                // 更新页码项引用并重新绑定事件
                pageItems = document.querySelectorAll('[data-type="page"]');
                pageItems.forEach(item => {
                    item.addEventListener('click', function() {
                        const page = parseInt(this.getAttribute('data-page'));
                        if (page !== currentPage && page >= 1 && page <= totalPages) {
                            goToPage(page);
                        }
                    });
                });
            }

            function getTagHtml(tags) {
                let tagHtml = '';
                tags.forEach(tag => {
                    tagHtml += `<span class="px-2 py-0.5 bg-sysu-lightGreen text-sysu-green rounded-full text-xs mr-2">${tag}</span>`;
                });
                return tagHtml;
            }

            /**
             * 跳转到指定页码
             */
            async function goToPage(targetPage) {
                // 更新当前页码
                paginationConfig.currentPage = targetPage;

                renderPageNumbers();

                // 更新分页按钮禁用状态
                updatePaginationStatus();

                // 添加加载动画
                const questionList = document.getElementById('question-list');
                questionList.innerHTML = '<div class="flex justify-center py-10"><div class="w-10 h-10 border-2 border-gray-300 border-t-sysu-green rounded-full animate-spin"></div></div>';
                // 回到顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });

                await loadPageData(targetPage);
            }

            /**
             * 更新分页按钮状态
             */
            function updatePaginationStatus() {
                const { currentPage, totalPages } = paginationConfig;

                // 上一页状态
                if (currentPage === 1) {
                    prevBtn.classList.add('disabled');
                } else {
                    prevBtn.classList.remove('disabled');
                }

                // 下一页状态
                if (currentPage === totalPages) {
                    nextBtn.classList.add('disabled');
                } else {
                    nextBtn.classList.remove('disabled');
                }
            }

            /**
             * 加载指定页码的数据
             */
            async function loadPageData(page) {
                console.log(`正在加载第 ${page} 页的数据...`);

                const tags = document.querySelectorAll('.tag-checkbox:checked');
                const difficulty = document.querySelectorAll('.difficulty-checkbox:checked');
                const status = document.querySelectorAll('.status-checkbox:checked');

                try {
                    const response = await fetch('/api/v1/Getquestion', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + localStorage.getItem('token')
                        },
                        body: JSON.stringify({
                            page: paginationConfig.currentPage,
                            page_size: 5,
                            tags: Array.from(tags).map(tag => tag.value),
                            difficulty: Array.from(difficulty).map(diff => diff.value),
                            status: Array.from(status).map(status => status.value),
                        }),
                    });
                    const data = await response.json();

                    if (data.code === 200) {
                        // 渲染数据
                        const questions = data.questions;
                        questionsCnt.textContent = data.length;
                        const questionList = document.getElementById('question-list');
                        questionList.innerHTML = '';

                        // 添加题目卡片，带延迟淡入动画
                        questions.forEach((question, index) => {
                            setTimeout(() => {
                                const questionItem = document.createElement('div');
                                questionItem.className = 'fade-in card-hover'; // 题目项添加淡入类
                                questionItem.innerHTML = `
                                    <div class="bg-white rounded-xl p-5 shadow-card">
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-3 gap-2">
                                            <div class="flex items-center">
                                                <span class="badge bg-sysu-green text-white mr-2">${question.state}</span>
                                                <span class="badge bg-yellow-100 text-yellow-700">${question.difficulty}</span>
                                            </div>
                                            <div class="flex items-center text-gray-500 text-sm">
                                                <span class="mr-4"><i class="fa fa-check mr-1"></i> ${question.solved_count}人解决</span>
                                            </div>
                                        </div>
                                        <h3 class="text-lg font-bold text-gray-800 mb-2 hover:text-sysu-green transition-colors">${question.title}</h3>

                                        <div class="flex items-center justify-between mt-4">
                                            <div class="flex items-center flex-wrap gap-1">
                                                ${getTagHtml(question.tags || [])}
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <button class="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 rounded-lg text-sm hover:border-sysu-green hover:text-sysu-green transition-colors">
                                                    <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                                </button>
                                                <a href="/questions/${question.id}" class="px-4 py-1.5 bg-sysu-green text-white rounded-lg text-sm hover:bg-sysu-darkGreen transition-colors">
                                                    开始做题
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                `;
                                questionList.appendChild(questionItem);
                                // 触发淡入效果
                                setTimeout(() => questionItem.classList.add('visible'), 50);

                                // 添加收藏按钮功能
                                const favoriteBtn = questionItem.querySelector('button');
                                favoriteBtn.addEventListener('click', function() {
                                    const isBookmarked = this.querySelector('.fa-bookmark') !== null;

                                    if (isBookmarked) {
                                        // 取消收藏
                                        this.innerHTML = '<i class="fa fa-bookmark-o mr-1"></i> 收藏';
                                        this.classList.remove('text-sysu-green', 'border-sysu-green');
                                        this.classList.add('text-gray-700', 'border-gray-300');
                                    } else {
                                        // 添加收藏
                                        this.innerHTML = '<i class="fa fa-bookmark mr-1"></i> 已收藏';
                                        this.classList.remove('text-gray-700', 'border-gray-300');
                                        this.classList.add('text-sysu-green', 'border-sysu-green');

                                        // 添加成功提示
                                        showNotification('已添加到收藏', 'success');
                                    }
                                });
                            }, index * 150); // 每个卡片延迟150ms，形成渐进式效果
                        });
                    } else {
                        console.log('获取题目失败');
                        showNotification('获取题目失败，请重试', 'error');
                    }
                } catch (error) {
                    console.error('加载数据出错:', error);
                    showNotification('网络错误，请重试', 'error');
                }
            }

            // 初始化第一页数据
            loadPageData(paginationConfig.currentPage);
        </script>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8 mt-16 fade-in">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start">
                        <div class="w-10 h-10 bg-white text-sysu-green rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2 text-center md:text-left">提升编程能力，培养算法思维</p>
                </div>

                <div class="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-gray-400">
                    <a href="#" class="hover:text-white transition-colors">关于我们</a>
                    <a href="#" class="hover:text-white transition-colors">使用帮助</a>
                    <a href="#" class="hover:text-white transition-colors">常见问题</a>
                    <a href="#" class="hover:text-white transition-colors">联系我们</a>
                    <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 中山大学刷题平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 通知提示组件 -->
    <div id="notification" class="fixed top-20 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center z-50 max-w-xs"></div>

    <script>
        // 页面加载完成后触发整体淡入
        document.addEventListener('DOMContentLoaded', function() {
            // 页面整体淡入
            const pageBody = document.getElementById('page-body');
            setTimeout(() => {
                pageBody.style.opacity = '1';
            }, 100);

            // 页面内元素渐进式淡入
            const fadeElements = document.querySelectorAll('.fade-in');
            fadeElements.forEach((el, index) => {
                // 按顺序延迟显示，营造层次感
                setTimeout(() => {
                    el.classList.add('visible');
                }, 150 + (index * 50));
            });

            // 检查登录状态
            checkLoginStatus();
        });

        // 筛选面板切换显示/隐藏
        const filterBtn = document.getElementById('filter-btn');
        const filterPanel = document.getElementById('filter-panel');
        const applyFilterBtn = document.getElementById('apply-filter-btn');

        filterBtn.addEventListener('click', () => {
            filterPanel.classList.toggle('hidden');
            // 切换按钮图标
            const icon = filterBtn.querySelector('i');
            if (filterPanel.classList.contains('hidden')) {
                icon.className = 'fa fa-filter mr-2';
                filterBtn.textContent = ' 筛选';
                filterBtn.prepend(icon);
                filterPanel.classList.remove('visible');
            } else {
                icon.className = 'fa fa-chevron-up mr-2';
                filterBtn.textContent = ' 收起筛选';
                filterBtn.prepend(icon);
                // 筛选面板淡入
                setTimeout(() => filterPanel.classList.add('visible'), 100);
            }
        });

        applyFilterBtn.addEventListener('click', async () => {
            // 添加加载状态
            applyFilterBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 应用中...';
            applyFilterBtn.disabled = true;

            const tags = document.querySelectorAll('.tag-checkbox:checked');
            const difficulty = document.querySelectorAll('.difficulty-checkbox:checked');
            const status = document.querySelectorAll('.status-checkbox:checked');

            try {
                const response = await fetch('/api/v1/Getquestion', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify({
                        page: 1,
                        page_size: 5,
                        tags: Array.from(tags).map(tag => tag.value),
                        difficulty: Array.from(difficulty).map(diff => diff.value),
                        status: Array.from(status).map(status => status.value),
                    }),
                });

                const data = await response.json();

                if (data.code === 200) {
                    const questions = data.questions;
                    questionsCnt.textContent = data.length;
                    const questionList = document.getElementById('question-list');
                    questionList.innerHTML = '';

                    // 重置分页到第一页
                    paginationConfig.currentPage = 1;
                    renderPageNumbers();
                    updatePaginationStatus();

                    // 添加题目卡片，带淡入动画
                    questions.forEach((question, index) => {
                        setTimeout(() => {
                            const questionItem = document.createElement('div');
                            questionItem.className = 'fade-in card-hover';
                            questionItem.innerHTML = `
                                <div class="bg-white rounded-xl p-5 shadow-card">
                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-3 gap-2">
                                        <div class="flex items-center">
                                            <span class="badge bg-sysu-green text-white mr-2">${question.state}</span>
                                            <span class="badge bg-yellow-100 text-yellow-700">${question.difficulty}</span>
                                        </div>
                                        <div class="flex items-center text-gray-500 text-sm">
                                            <span class="mr-4"><i class="fa fa-check mr-1"></i> ${question.solved_count}人解决</span>
                                        </div>
                                    </div>
                                    <h3 class="text-lg font-bold text-gray-800 mb-2 hover:text-sysu-green transition-colors">${question.title}</h3>

                                    <div class="flex items-center justify-between mt-4">
                                        <div class="flex items-center flex-wrap gap-1">
                                            ${getTagHtml(question.tags || [])}
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <button class="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 rounded-lg text-sm hover:border-sysu-green hover:text-sysu-green transition-colors">
                                                <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                            </button>
                                            <a href="/questions/${question.id}" class="px-4 py-1.5 bg-sysu-green text-white rounded-lg text-sm hover:bg-sysu-darkGreen transition-colors">
                                                开始做题
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            `;
                            questionList.appendChild(questionItem);
                            // 触发淡入
                            setTimeout(() => questionItem.classList.add('visible'), 50);

                            // 添加收藏按钮功能
                            const favoriteBtn = questionItem.querySelector('button');
                            favoriteBtn.addEventListener('click', function() {
                                const isBookmarked = this.querySelector('.fa-bookmark') !== null;

                                if (isBookmarked) {
                                    // 取消收藏
                                    this.innerHTML = '<i class="fa fa-bookmark-o mr-1"></i> 收藏';
                                    this.classList.remove('text-sysu-green', 'border-sysu-green');
                                    this.classList.add('text-gray-700', 'border-gray-300');
                                } else {
                                    // 添加收藏
                                    this.innerHTML = '<i class="fa fa-bookmark mr-1"></i> 已收藏';
                                    this.classList.remove('text-gray-700', 'border-gray-300');
                                    this.classList.add('text-sysu-green', 'border-sysu-green');

                                    showNotification('已添加到收藏', 'success');
                                }
                            });
                        }, index * 150);
                    });

                    showNotification('筛选已应用', 'success');
                } else {
                    console.log('获取题目失败');
                    showNotification('筛选失败，请重试', 'error');
                }
            } catch (error) {
                console.error('筛选出错:', error);
                showNotification('网络错误，请重试', 'error');
            } finally {
                // 恢复按钮状态
                applyFilterBtn.innerHTML = '应用';
                applyFilterBtn.disabled = false;

                // 收起筛选面板
                filterPanel.classList.add('hidden');
                filterPanel.classList.remove('visible');
                const icon = filterBtn.querySelector('i');
                icon.className = 'fa fa-filter mr-2';
                filterBtn.textContent = ' 筛选';
                filterBtn.prepend(icon);
            }
        });

        // 重置筛选按钮
        const resetFilterBtn = document.getElementById('reset-filter-btn');
        resetFilterBtn.addEventListener('click', () => {
            // 重置难度筛选
            document.querySelectorAll('.difficulty-checkbox').forEach(checkbox => {
                checkbox.checked = true;
            });
            // 重置标签筛选
            document.querySelectorAll('.tag-checkbox').forEach(checkbox => {
                checkbox.checked = true;
            });
            // 重置状态筛选
            document.querySelectorAll('.status-checkbox').forEach(checkbox => {
                checkbox.checked = true;
            });
        });

        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            // 切换图标
            const icon = mobileMenuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.className = 'fa fa-bars text-lg';
            } else {
                icon.className = 'fa fa-times text-lg';
            }
        });

        // 通知提示功能
        function showNotification(message, type = 'info') {
            const notification = document.getElementById('notification');

            // 设置样式
            notification.className = 'fixed top-20 right-4 px-4 py-3 rounded-lg shadow-lg transform transition-transform duration-300 flex items-center z-50 max-w-xs';

            // 根据类型设置不同样式
            if (type === 'success') {
                notification.classList.add('bg-green-50', 'text-green-800', 'border', 'border-green-200');
                notification.innerHTML = '<i class="fa fa-check-circle mr-2 text-green-500"></i>' + message;
            } else if (type === 'error') {
                notification.classList.add('bg-red-50', 'text-red-800', 'border', 'border-red-200');
                notification.innerHTML = '<i class="fa fa-times-circle mr-2 text-red-500"></i>' + message;
            } else {
                notification.classList.add('bg-blue-50', 'text-blue-800', 'border', 'border-blue-200');
                notification.innerHTML = '<i class="fa fa-info-circle mr-2 text-blue-500"></i>' + message;
            }

            // 显示通知（淡入效果）
            notification.classList.remove('translate-x-full');

            // 3秒后自动隐藏
            setTimeout(() => {
                notification.classList.add('translate-x-full');
            }, 3000);
        }

        // 用户登录状态检查
        async function checkLoginStatus() {
            const container = document.getElementById('user-area-container');
            const loadingIndicator = document.getElementById('loading-indicator');

            try {
                const token = localStorage.getItem('token');
                const response = await fetch('/api/check_login', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token
                    }
                });

                if (!response.ok) {
                    throw new Error('验证请求失败');
                }

                const data = await response.json();

                if (data.is_logged_in) {
                    renderLoggedInView(container, data || {});
                } else {
                    renderLoggedOutView(container);
                }
            } catch (error) {
                console.error('登录状态验证出错:', error);
                renderLoggedOutView(container);
            } finally {
                if (loadingIndicator) {
                    loadingIndicator.remove();
                }
            }
        }

        // 渲染已登录视图
        function renderLoggedInView(container, userData) {
            container.innerHTML = `
                <div class="relative" id="userDropdown">
                    <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                        <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                             alt="${userData.username || '用户头像'}"
                             class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-green transition-colors">
                        <span class="hidden sm:inline-block text-sm font-medium text-gray-700">${userData.username || '用户'}</span>
                        <i class="fa fa-angle-down text-gray-500 transition-transform duration-300" id="dropdownIcon"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50 border border-gray-100" id="dropdownMenu">
                        <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors">个人中心</a>
                        <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors">学习进度</a>
                        <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors" onclick="logout()">退出登录</a>
                    </div>
                </div>
            `;

            // 绑定下拉菜单事件
            bindDropdownEvents();
        }

        // 退出登录
        function logout() {
            try {
                const token = localStorage.getItem('token');
                fetch('/api/v1/logout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token
                    }
                }).then(() => {
                    localStorage.removeItem('token');
                    window.location.href = '/';
                    showNotification('已成功退出登录', 'success');
                });
            } catch (error) {
                console.error('退出登录出错:', error);
                showNotification('退出登录失败', 'error');
            }
        }

        // 渲染未登录视图
        function renderLoggedOutView(container) {
            container.innerHTML = `
                <div class="flex items-center space-x-3">
                    <a href="{{ url_for('login') }}" class="text-gray-600 hover:text-sysu-green transition-colors px-3 py-2 rounded-md text-sm font-medium">
                        登录
                    </a>
                    <a href="{{ url_for('register') }}" class="bg-sysu-green text-white hover:bg-sysu-darkGreen transition-colors px-3 py-2 rounded-md text-sm font-medium">
                        注册
                    </a>
                </div>
            `;
        }

        // 绑定下拉菜单交互事件
        function bindDropdownEvents() {
            const dropdownTrigger = document.getElementById('dropdownTrigger');
            const dropdownMenu = document.getElementById('dropdownMenu');
            const dropdownIcon = document.getElementById('dropdownIcon');
            const userDropdown = document.getElementById('userDropdown');

            if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

            dropdownTrigger.addEventListener('click', (e) => {
                e.stopPropagation();
                dropdownMenu.classList.toggle('hidden');
                dropdownIcon.classList.toggle('rotate-180');
                // 下拉菜单淡入
                if (!dropdownMenu.classList.contains('hidden')) {
                    dropdownMenu.style.opacity = '0';
                    dropdownMenu.style.transition = 'opacity 0.2s ease';
                    setTimeout(() => dropdownMenu.style.opacity = '1', 50);
                }
            });

            document.addEventListener('click', () => {
                if (!dropdownMenu.classList.contains('hidden')) {
                    dropdownMenu.classList.add('hidden');
                    dropdownIcon.classList.remove('rotate-180');
                }
            });

            dropdownMenu.addEventListener('click', (e) => {
                e.stopPropagation();
            });

            userDropdown.addEventListener('mouseleave', () => {
                setTimeout(() => {
                    if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                        dropdownMenu.classList.add('hidden');
                        dropdownIcon.classList.remove('rotate-180');
                    }
                }, 300);
            });
        }
    </script>
</body>
</html>